<template>
  <div key="id">
    <div class="flex items-center">
      <div class="m-r-2">下拉选择</div>
      <el-button size="small" :icon="Plus" circle @click="addOptionHandle" />
    </div>
    <div v-for="(item, index) in textArr" :key="index" class="m-b-2">
      <!-- 选项 -->
      <div class="title my-2 flex items-center">
        <span>选项{{ index + 1 }}</span>
        <el-button
          type="danger"
          class="ml-1 delete"
          size="small"
          :icon="Minus"
          circle
          @click="rmOptionHandle(index)"
        />
      </div>
      <el-input v-model="item.status" placeholder="选项内容" class="mb-2" />
      <el-input v-model="item.value" placeholder="选项值" class="mb-2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UpdateStatus, ValueStatusArr, VueComType } from '@/types'
import { Plus, Minus } from '@element-plus/icons-vue'
const props = defineProps<{
  configKey: string
  id: string
  status: ValueStatusArr
  currentStatus: number
  isShow: boolean
  editCom: VueComType
}>()
const textArr = ref(props.status)
const updateStatus = inject<UpdateStatus>('updateStatus')
const addOptionHandle = () => {
  if (updateStatus) updateStatus(props.configKey)
}
const rmOptionHandle = (index: number) => {
  console.log(index)
  if (updateStatus) updateStatus(props.configKey, index)
}
</script>

<style scoped lang="scss">
.title {
  color: var(--font-color-light);
  font-size: var(--font-size-base);
}
.delete {
  transform: scale(0.8);
}
</style>
